<template>
	<view>
		<!-- 当设置tab-width,指定每个tab宽度时,则不使用flex布局,改用水平滑动 -->
		<!-- <me-tabs class="TD-metab" v-model="tabIndex" :tabs="tabs"></me-tabs> -->
		
		 <Goodme-tabs class="TD-metab" v-model="tabIndex" :tabs="tabs"></Goodme-tabs>
		 <!-- <me-tabs class="TD-metab" v-model="tabIndex" :tabs="tabs"></me-tabs> -->
		<!-- :tab-width="130" -->
		<swiper :style="{height: height}" :current="tabIndex" @change="swiperChange">
			<swiper-item v-for="(tab,i) in tabs" :key="i">
				<mescroll-item ref="mescrollItem" :i="i" :index="tabIndex" :tabs="tabs"
					:height="height"></mescroll-item>
			</swiper-item>
		</swiper>
		
	</view>
</template>

<script>
	const api = require('../../../config/api');
	const util = require('../../../utils/util');
	import MescrollItem from "./mescroll-swiper-item.vue";
	export default {
		components: {
			MescrollItem
		},
		data() {
			return {
				height: "", // 需要固定swiper的高度
				tabs: [],
				// tabs: [{name:'直属',type:0}],
				tabIndex: 0 // 当前tab的下标
			}
		},
		onLoad() {
			// 需要固定swiper的高度 (需减去悬浮tabs的高度64rpx)
			this.height = uni.getSystemInfoSync().windowHeight - uni.upx2px(64) + 'px'
		},
		onShow() {
			this.getListfl();
		},
		//#ifdef APP-PLUS
		onNavigationBarButtonTap: function(e) {
			// console.log(e);
			// this.showopen()
		},
		//#endif
		methods: {
			// 轮播菜单
			swiperChange(e) {
				this.tabIndex = e.detail.current
			},
			async getListfl() {
				const res = await util.request(
					api.listFltUrl, {
					},
					'POST'
				);
				// console.log(res);
				if (res.code !== 0) {

				} else {
				this.tabs = res.data
					// this.records = res.data.records
				}
			},
			// 获取指定下标的mescroll对象
			// getMescroll(i){
			// 	let mescrollItems = this.$refs.mescrollItem;
			// 	if(mescrollItems){
			// 		let item = mescrollItems[i]
			// 		if(item) return item.mescroll
			// 	}
			// 	return null
			// }
		}
	}
</script>

<style>
	/* .TD-metab{
		padding: 10px !important;
	} */
	/* .me-tabs .tabs-item .tab-item.active {
		color: #98BCFC !important;
	}

	.me-tabs .tabs-line {
		background: #98BCFC !important;
	}

	.me-tabs {
		height: 40px !important;
	} */

	
page{
	height: 100%;
	background-color: #F4F5F7;
}
	
</style>